<template>
  <div class="flex sopbodywrap">
    <div class="sopleft">
      <div
        v-for="(item, index) in planList"
        :key="index"
        class="sopleft_item flexbetween p_relative commhover"
        :class="{ active: active == item.id }"
        @click="handleItem(item)"
      >
        <span>第一天</span>
      </div>
    </div>
    <div class="sopright p-20">
      <div class="flexbetween mb-12">
        <span>发送内容</span>
        <span class="f-12 c_text3"
          >08:00:00 ~ 10:00:00 内随机开始发送第一条</span
        >
      </div>
      <div class="sopcontentitem mb-10">
        <div class="sopinterval bg_f5 p-8 line_h_24">10秒后发送</div>
        <div class="soptextitem flex p-10">
          <div class="textleft flexcenter">
            <div class="sopdot f-12 flexcenter">1</div>
          </div>
          <div class="textcontent flex aligncenter">
            <div class="msgbox">1111</div>
          </div>
        </div>
      </div>
      <div class="sopcontentitem mb-10">
        <div class="sopinterval bg_f5 p-8 line_h_24">
          上一条消息发送后10秒发送
        </div>
        <div class="soptextitem flex p-10">
          <div class="textleft flexcenter">
            <div class="sopdot f-12 flexcenter">2</div>
          </div>
          <div class="textcontent flex aligncenter">
            <div class="imgbox commhover">
              <img
                src="https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240229/419c610c287435f826d7a7ea252b71f1.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
    };
  },
  props: {
    planList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    handleItem(item) {
      this.active = item.id;
    },
  },
};
</script>

<style lang="scss" scoped>
.sopbodywrap{
  min-height: 500px;
  width: 100%;
}
.sopleft {
  border-right: 1px solid #e9e9e9;
  padding: 4px 12px;
  width: 200px;

  .sopleft_item {
    color: #666;
    height: 32px;
    margin: 8px 0;
    padding-left: 8px;
    padding-right: 5px;
    border-radius: 2px;
    transition: all 0.3s;
    &.active {
      background-color: #ebf2ff;
    }
    &:hover {
      background-color: #f7f7f7;
    }
  }
}
.sopright {
  overflow-x: hidden;
  overflow-y: auto;
  width: calc(100% - 200px);
}
.sopinterval {
  border: 1px solid #e9e9e9;
  border-bottom: 0;
  width: fit-content;
}
.soptextitem {
  border: 1px solid #e9e9e9;
  .textleft {
    width: 50px;
  }
  .sopdot {
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: #ddd;
    border-radius: 50%;
  }
  .textcontent {
    flex: 1 1;
    .msgbox {
      max-width: 360px;
      word-break: break-all;
      width: fit-content;
      padding: 6px 12px;
      border: 1px solid #e9e9e9;
      border-radius: 5px;
      line-height: 22px;
    }
    .imgbox img {
      max-width: 160px;
      max-height: 160px;
      border-radius: 5px;
    }
  }
}
</style>